<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QRX4J Samples</title>
		<wicket:head>
			<script>
				activeTab = 1;
				disabledTabs = [0];
				/**$(function() {
				    $( "#accordion" ).accordion({ heightStyle: "content" });
		  		});**/
		  		
		  		function initSelectableItems() {
					$("#selectable li").bind("click", function() {
						if (!$(this).hasClass()) {
							$(this).siblings().removeClass("ui-selected");
							$(this).addClass("ui-selected");
						}
					});
					
					$("#selectable li").hover(function(){$(this).toggleClass("selectable_hover");});
				}
				
				$(function() {
				  	initSelectableItems(); 	 
				});
				
				function newPopup(url) {
					popupWindow = window.open(
						url,'popUpWindow','height=600,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
				}
		  		
			</script>
			
			<style>
				  .selectable_hover { background: #FECA40; }
				  #selectable .ui-selecting { background: #FECA40; }
				  #selectable .ui-selected { background: #F39814; color: white; }
				  #selectable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
				  #selectable li { line-height:20px; margin: 5px; font-size: 12px; cursor: pointer;}
				  #selectable li label { cursor: pointer;}
		  </style>
		</wicket:head>
	</head>
	<body>
		<div>
			
			<wicket:extend>
			 
			 <div style="width:90%; margin-left: 5%; ">	
				<div id="tabs-1"/>
				
				<div id="tabs-2" class="tabContent">
						<div style="color:#FF5500; font-size: 16pt;">
							<h3>Edit Order</h3>
							<div style="float:right;">
								<a style="color:#FF5500; font-size:10pt "  href="javascript:newPopup('../EditOrderInfo.html');">Info</a>
							</div>
						</div>
						
						<!-- <div id="accordion"> -->
						<!-- 	<h3 style="font-size: 10pt; color:#FF5500; ">Order Details</h3>  -->
							
						<div wicket:id="selectCustomerWindow"/>
						
						<form wicket:id="editOrderForm">
	
							<div wicket:id="feedback"/>
							
							<div style="width:70%; margin-left: 15%;">
								 <ul style="margin-top:25px;">
									<li style=" width: 300px; display: inline;">
										<label style="width: 100px; display: inline-block;"><wicket:message key="LBL_INSTRUCTIONS"/></label>
										<input type="text" wicket:id="instructions" style="width: 200px;"/>
									</li>
									
									<li style="padding-left:64px;width:300px; display: inline;">
										<label style="width: 100px; display: inline-block;"><wicket:message key="LBL_CARRIER"/></label>
										<input type="text" wicket:id="carrier" style="width: 200px;"/>
									</li>
								</ul>
								
								<ul style="margin-top:25px;">	
									<li style="display: inline;">
										<label style="width: 100px; display: inline-block;" ><wicket:message key="LBL_PROMISE_DATE"/><font color="red">*</font></label>
										<input type="text" wicket:id="promisedate" style="width: 200px;"/>
									</li>
									
									<li style="padding-left:40px; display: inline;">
										<label style=" width: 100px; display: inline-block;"><wicket:message key="LBL_SALES_REP"/><font color="red">*</font></label>
										<input type="text" wicket:id="salesrep" style="width: 200px;"/>
									</li>
								</ul>
									
								<ul style="margin-top:25px;">
									<li style="display: inline">
										<label style="display: inline-block; width: 100px;"><wicket:message key="LBL_STATUS"/><font color="red">*</font></label>
										<select wicket:id="orderstatus" style="width: 200px;"/>
									</li>
									
									<li style="display: inline; padding-left:64px;">
										<label style="display: inline-block; width: 100px;"><wicket:message key="LBL_CUSTOMER"/><font color="red">*</font></label>
										
										<div class="formLookupLabel" style="display: inline;" >
											<label wicket:id="customerLabel"/>
											<a class="lookup-btn" wicket:id="selectCustomerLnk" tabindex="-1"></a>
										</div>
									</li>
								</ul>	
								
								<ul style="margin-top:25px;">	
									<li style="display: inline;">
										<label style="display: inline-block; width: 100px;" ><wicket:message key="LBL_SHIP_DATE"/></label>
										<input type="text" wicket:id="shipdate" style="width: 200px;"/>
									</li>
									
									<li style="padding-left:40px; display: inline;">
										<label style="display: inline-block; width: 100px;"><wicket:message key="LBL_TERMS"/></label>
										<input type="text" wicket:id="terms" style="width: 200px;"/>
									</li>
								</ul>
									
								<div class="box-buttons-right">
									<input type="button" class="button" wicket:id="saveBtn" value="Save" />
									<input type="button" class="button" wicket:id="resetBtn" value="Reset" />
									<input type="button" class="button" wicket:id="nextBtn" value="Next" />
									<input type="button" class="button" wicket:id="btnBckToSearch" value="Back To Search" />
									<font color="red" style="display:block;">*Changes are persisted on the last 'Finish' tab</font>
								</div>
								
							</div>
						</form>
							<!-- 
							<h3 style="font-size: 10pt; color:#FF5500; ">Order Lines</h3>
							<div style="height:400px;"></div>
							
							<h3 style="font-size: 16pt; color:#FF5500; ">What is Quarix</h3>
							<div>Quarix text and links</div> -->
						<!-- </div>  -->	
					</div>
					<div id="tabs-3">
						
						<div style="color:#FF5500; font-size: 16pt;">
							<h3>Manage Order Lines</h3>
							<div style="float:right;">
								<a style="color:#FF5500; font-size:10pt "  href="javascript:newPopup('../EditOrderLinesInfo.html');">Info</a>
							</div>
						</div>
						
						<div style="width:70%; margin-left: 15%;" class="box-buttons-right">
                        	<input type="button" class="button" wicket:id="addOrderLineBtn" value="Add"/>
                        </div>
                        
                        
						<div wicket:id="orderLineFormContainer" >
							
							<form wicket:id="editOrderLineForm">
		
								<div style="width:70%; margin-left: 15%;">
									
									<div wicket:id="feedback"/>
								
									 <ul style="margin-top:15px;">
										<li style=" width: 300px; display: inline;">
											<label style="width: 100px; display: inline-block;"><wicket:message key="LBL_ITEM"/><font color="red">*</font></label>
											<wicket:container wicket:id="itemnum"/>
										</li>
										
										<li style="padding-left:40px;width:300px; display: inline;">
											<label style="width: 100px; display: inline-block;"><wicket:message key="LBL_QTY"/><font color="red">*</font></label>
											<input type="text" wicket:id="qty" style="width: 200px; text-align:right;"/>
										</li>
									</ul>
									
									<ul style="margin-top:15px;">	
										<li style="display: inline;">
											<label style="width: 100px; display: inline-block;" ><wicket:message key="LBL_PRICE"/><font color="red">*</font></label>
											<input type="text" wicket:id="price" style="width: 200px; text-align:right;"/>
										</li>
										
										<li style="padding-left:67px; display: inline;">
											<label style=" width: 100px; display: inline-block;"><wicket:message key="LBL_DISCOUNT"/></label>
											<input type="text" wicket:id="discount" style="width: 200px;text-align:right;"/>
										</li>
									</ul>
										
									<ul style="margin-top:15px;">
										<li style="display: inline">
											<label style="display: inline-block; width: 100px;"><wicket:message key="LBL_STATUS"/><font color="red">*</font></label>
											<select wicket:id="orderlinestatus" style="width: 200px;"/>
										</li>
									</ul>	
									
									<div class="box-buttons-right">
										<input type="button" class="button" wicket:id="saveBtn" value="Save" />
										<input type="button" class="button" wicket:id="resetBtn" value="Reset" />
										<input type="button" class="button" wicket:id="cancelBtn" value="Cancel" />
										<input type="button" class="button" wicket:id="deleteBtn" value="Delete" />
										<input type="button" class="button" wicket:id="previousBtn" value="Previous" />
										<input type="button" class="button" wicket:id="nextBtn" value="Next" />
										<input type="button" class="button" wicket:id="btnBckToSearch" value="Back To Search" />
										<font color="red" style="display:block;">*Changes are persisted on the last 'Finish' tab</font>
									</div>
									
								</div>
							</form>
						</div>
						
						<div class="spacer"/> 
						
						<div style="width:70%; margin-left: 15%;">
							
							<div wicket:id="listHolder1">
								
								<ol id="selectable" class="ui-selectable">
									
									<li wicket:id="itemsList1" class="ui-widget-content ui-selectee" style="cursor: pointer;">
										
										<span style="font-size: 14px;  padding-left:50px; margin:50px 10px 10px 0px;  font-weight: bold; width: 100%; ">
											<label style="padding-left: 10px;" wicket:id="lblName"/>
										</span>
										
										<br/>
										
										<span style="font-size: 12px; font-style:italic; padding-left: 100px; margin: 0px 20px 20px 0px;">
											<span style="width :'300px'; padding-left: 50px; padding-right: 20px;">
												<label>Status:</label><label style="padding-left: 10px;" wicket:id="lblStatus"/>
											</span>
											
											<span style="width :'300px'; padding-left: 20px; padding-right: 20px;">
												<label>Price:</label><label style="padding-left: 10px;"  wicket:id="lblPrice"/>
											</span>
												
											<span style="width :'300px'; padding-left: 20px; padding-right: 20px;">
												<label>Quantity:</label><label style="padding-left: 10px;"  wicket:id="lblQty"/>
											</span>
											
											<span style="width :'300px'; padding-left: 20px; padding-right: 20px;">
												<label>Extended Price:</label><label style="padding-left: 10px;" wicket:id="lblExtendedPrice"/>
											</span>	
										</span>
									</li>
								</ol>
								<p wicket:id="noResultId1" style="text-align: center; font-size: 14px;">No order lines on current order.</p>
								
								<div class="box-buttons-right">
									<label wicket:id="totalOrderPrice">Total Price:</label>
								</div>
								
							</div>
						</div>
					</div>
					
					<div id="tabs-4" class="tabContent">
						
						<div style="color:#FF5500; font-size: 16pt;">
							<h3>Finish</h3>
							<div style="float:right;">
								<a style="color:#FF5500; font-size:10pt "  href="javascript:newPopup('../FinishEditOrderInfo.html');">Info</a>
							</div>
						</div>
						
						<div wicket:id="finishEditOrderPanel"/>
				
					</div>
					
				</div>
			</wicket:extend>	
		</div>	
	</body>
</html>